﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sudo Slider | Videos in the slider</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel="STYLESHEET" type="text/css" href="../css/style.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
    <script>
        $(document).ready(function(){
            var videos = [];
            videos[1] = loadVideo('video1', 'Oiuzt2E4NYc');
            videos[2] = loadVideo('video2', 'gsyMiTx_CF8');
            videos[3] = loadVideo('video3', 'hDlif8Km4S4');

            var oldSlide = 1;
            var sudoSlider = $("#frontPageSlider").sudoSlider({
                effect: "slide",
                numeric:true,
                prevNext: false,
                beforeanimation: function (slide) {
                    try {
                        var video = videos[oldSlide];
                        if (video && video.pauseVideo) {
                            video.pauseVideo();
                        }
                    } catch(ignored) {

                    }
                    oldSlide = slide;
                }
            });

            // Load the video with the given videoId into the container with the given id.
            function loadVideo(id, videoId, mute) {
                if (!window.onYouTubePlayerAPIReady) {
                    var tag = document.createElement('script');
                    tag.src = "http://www.youtube.com/player_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    window.youtubePlayerReady = false;
                }

                var player = false;
                function loadPlayer () {
                    player = new YT.Player(id, {
                        height: '315',
                        width: '560',
                        videoId: videoId,
                        events: {
                            'onReady': function () {
                                if (mute) {
                                    player.mute();
                                }
                            }
                            // 'onStateChange': onPlayerStateChange
                        }
                    });
                    sudoSlider.adjust();
                }
                if (!window.youtubePlayerReady) {
                    var oldFunction = window.onYouTubePlayerAPIReady;
                    window.onYouTubePlayerAPIReady = function () {
                        window.youtubePlayerReady = true;
                        loadPlayer();
                        if (oldFunction) {
                            oldFunction();
                        }
                    }
                } else {
                    loadPlayer();
                }
                return  {
                    playVideo : function () {
                        if (player) player.playVideo();
                    },
                    pauseVideo : function () {
                        if (player) player.pauseVideo();
                    }
                };
            }
        });
    </script>


</head>
<body>
<div id="container">
    <!-- START MEDIUM SECTION -->
    <h2>See the source code for how to do this. </h2>
    <h2>Remember that only the default slide animation works well with flash content. </h2>
    <div style="position: relative;">
        <div id="frontPageSlider">
            <div>
                <div id="video1"></div>
            </div>
            <div>
                <div id="video2"></div>
            </div>
            <div>
                <div id="video3"></div>
            </div>
        </div>
        <h2>You can always just insert a flash video into a slide <br/>
            You only need to do these sorts of tricks if you want to pause the video when its not visible</h2>
    </div>
</div>


<div style="width:728px;height:90px;margin:0 auto;">
    <script type="text/javascript">
        <!--
        google_ad_client = "pub-8170632875475442";
        /* Sudo Slider, lang horisontal */
        google_ad_slot = "0149025622";
        google_ad_width = 728;
        google_ad_height = 90;
        //-->
    </script>
    <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>

</body>
</html>